<template>
  <div class="content-container">
    <p-input
      v-if="isEdit && isNewPrice"
      v-model="value"
      :disabled="disabled"
      oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g,'$1')"
      @change="handleChange"
    />
    <span v-else class="ellipsis">
      {{ value || '-' }}
    </span>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: '',
    },
    isEdit: {
      type: Boolean,
      default: true,
    },
    isNewPrice: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    handleChange(e) {
      const val = e.target.value;
      this.$emit('change', val);
    },
  },
};
</script>

<style lang="less" scoped>
.content-container {
  width: 100%;
  display: flex;
  align-items: center;
  .content {
    margin-right: auto;
  }
  .icon {
    margin-left: 8px;
  }
  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    // white-space: nowrap;
    width: 80px;
  }
}
</style>
